<!--在线约车-->
<template>
    <div>
                <!-- 面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>在线约车</el-breadcrumb-item>
            </el-breadcrumb>
            <div style="margin: 10px auto;"></div>
            <div v-if="show" style="color:red;font-size:23px">您还没有预约教练</div>
            <div v-if="!show">
                <div>
                    您的教练：<span style="color:red">{{user.username}}</span>
                    <div style="margin: 10px auto;"></div>
                    <div>
                    手机：<span style="color:red">{{user.tel}}</span>
                    </div>
                </div>
                <div style="margin: 10px auto;"></div>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane v-for="(item,index) in time" :key="index" :label="item">
                    </el-tab-pane>
                 </el-tabs>

                                   <!--列表-->
                <el-table size="small"  style="width: 100%" :data="listData" highlight-current-row v-loading="loading"  element-loading-text="拼命加载中" >
                        
                        <el-table-column
                            fixed
                            width="200"
                        prop="startTime"
                        label="开始时间">
                        <template slot-scope="scope">
                                <span class="jiacu">{{scope.row.startTime}}</span>
                        </template>
                        </el-table-column>

                        <el-table-column
                          
                            width="200"
                        prop="endTime"
                        label="结束时间">
                        <template slot-scope="scope">
                                <span class="jiacu">{{scope.row.endTime}}</span>
                        </template>
                        </el-table-column>

                        <el-table-column
                          
                            width="200"
                        prop="stateName"
                        label="结束时间">
                        <template slot-scope="scope">
                                <span style="color:red">{{scope.row.stateName}}</span>
                        </template>
                        </el-table-column>
                        

                    <el-table-column  align="center" label="操作" min-width="300">
                        <template slot-scope="scope">
                            <el-popconfirm
                            v-if="scope.row.state == '0'"
                            @confirm="order(scope.row.id)"
                            title="确定要预约吗？"
                            >
                            <el-button slot="reference"  size="mini"   type="danger" >预 约</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
                </el-table>
            </div>
  

    </div>
</template>
<script>
export default {
    data() {
        return {
            listData:[],
            show:false,
            loading:false,
            activeName:0,
            time:[],
            newdate:"",
            user:""
        }
    },
    created(){
        this.findTime();
        
    },
    methods: {
        findData(){
            this.loading =true;
            setTimeout(()=>{
                this.loading =false
            },500)
            this.$api.get("/subject/token/findSubject",{"newdate":this.newdate},res=>{
                  if(res.data.code == 200){
                       this.user = res.data.datamap.coach;
                       this.listData =res.data.data;
                  }else{
                      this.show = true;
                      this.$message.error(res.data.data);
                  }
            })
        },
         handleClick(tab, event) {
             this.newdate = this.time[tab.index];
            this.findData(this.time[tab.index]) 
        },
        findTime(){  //获取时间
            
            this.$api.get("/subject/findNewTime","",res=>{
                    this.time = res.data.data;
                    this.newdate =this.time[0];
                    this.findData();
            })
        },
        order(id){     //预约科目
            this.$api.get("/subject/token/orderSubjectByStudent",{"id":id},res=>{
                    if(res.data.code ==200){
                        this.$message.success(res.data.data)
                        this.findData();
                    }else{
                        this.$message.fail("失败")
                    }
            })
        },
    },
}
</script>
<style scoped>

</style>